<template>
  <div class="wrap">
    <!-- <router-link :to="{ name: 'bsearchGoods' }"> -->
    <van-search
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索内容"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- </router-link> -->
    <div class="titleWarp">
      <!-- <div
        class="titleItem"
        :class="{ titleItemActiv: typeId == 0 }"
        @click="reqList(-1)"
      >
        推荐
      </div> -->
      <div
        class="titleItem"
        v-for="(item, index) in resShopTypeList"
        :key="index"
        :class="{ titleItemActiv: typeId == item.id }"
        @click="reqList(item.id)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="filterWrap">
      <div class="filterItem" @click="orderByPrice">
        价格
        <img src="@/assets/paixu2.png" alt="" />
      </div>
      <div class="filterItem filterItemLine"></div>
      <div class="filterItem" @click="orderBy()">
        销量
        <img src="@/assets/paixu2.png" alt="" />
      </div>
    </div>
    <div class="goodsList">
      <div
        @click="jumpGoodsInfo(item.id)"
        v-for="(item, index) in resDayRecInfo"
        :key="index"
        class="goodsItem"
      >
        <img :src="$imgUrl + item.listImgUrl" alt="" class="goodsBanner" />
        <div class="proTitle">
          {{ item.goodsName }}
        </div>
        <div class="priceWrap">
          <div class="priceNum">￥{{ item.price }}</div>
          <div class="saleNum">已售{{ item.saleNum }}</div>
        </div>
      </div>
      <div
        style="font-size: 12px; color: #181818; margin-top: 20px; text-align: center"
        v-if="resDayRecInfo.length == 0"
      >
        暂无该类商品...
      </div>
      <div class=""></div>
    </div>
    <!-- <tabbar></tabbar> -->
    <div style="height: 100px"></div>
    <div class="tabbarWrap">
      <router-link :to="{ name: 'bIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar1.2.png" alt="" class="tabbarImg" />
          <p class="tabbarText">商城</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'bShopIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar4.2.png" alt="" class="tabbarImg" />
          <p class="tabbarText">店铺</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'bPersonalCenter' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar3.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">我的</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
// import Axios from 'axios'
import { Search } from "vant";
import {
  apiAppUserInfo,
  apiPlatformTypeList,
  apiPlatformGoodsList,
  apiUserAddressList,
  apiAddressList,
  apiGetDayRecShopList,
  apiGetShopList,
} from "@/request/api"; // api接口
import tabbar from "../components/tabbarB";
export default {
  name: "App",
  data() {
    return {
      value: "",
      show: false,
      columns: ["全部宿舍"],
      imagesBanners: [],
      bannerData: "",
      resShopTypeList: "",
      chooseSchoolData: "", //选择的校区信息
      resDormList: "", //宿舍楼列表
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resDayRecInfo: [], //日推店铺列表
      towerInfo: {
        addressName: "宿舍",
        id: "",
      }, //选择的宿舍楼信息
      isAsc: "desc", //排序
      typeId: "", //推荐类型为-1.其余为类型id
      orderByWay: "", //销量-saleNum，价格-price
      // _____________
    };
  },
  created() {
    apiAppUserInfo({}).then((res) => {
      var resUserInfo = res.data;
      console.log("用户个人信息:", resUserInfo);
      if (!resUserInfo.isShopFinish) {
        //没有完善店铺信息 去完善店铺信息
        this.$router.push({
          path: "/pages/fillShopInfomation",
          query: {
            //传递参数
          },
        });
      }
    });
  },
  activated(){
 this.platformTypeList();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  mounted() {
    this.platformTypeList();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return false;
        }
        this.noMore = false;
        this.getPlatformGoodsList();
      }
    },

    //获取首页店铺类型：
    platformTypeList() {
      apiPlatformTypeList({}).then((res) => {
        this.resShopTypeList = res.data;
        this.typeId = res.data[0].id;
        this.getPlatformGoodsList();
        console.log("商品类型:", this.resShopTypeList);
      });
    },
    //获取商品列表：
    getPlatformGoodsList() {
      var page = (this.reqPageNum += 1);
      console.log("page", page, this.value);
      apiPlatformGoodsList({
        typeId: this.value == "" ? this.typeId : "",
        pageNum: page,
        pageSize: this.reqpageSize,
        orderByColumn: this.orderByWay,
        isAsc: this.isAsc,
        goodsName: this.value,
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.typeId = res.data.rows[0].typeId
        this.resDayRecInfo = [...this.resDayRecInfo, ...dataRes];
        console.log("resDayRecInfo-推荐", this.resDayRecInfo);
      });
    },
    reqList(i) {
      this.noMore = false;
      this.reqPageNum = 0;
      this.value = "";
      this.resDayRecInfo = [];
      this.typeId = i;
      this.getPlatformGoodsList();
    },
    //切换销量：
    orderBy() {
      this.orderByWay = "saleNum";
      this.isAsc = this.isAsc == "desc" ? "asc" : "desc";
      this.noMore = false
      this.reqPageNum = 0;
      this.resDayRecInfo = [];
      this.getPlatformGoodsList();
    },
    //切换价格
    orderByPrice() {
      this.orderByWay = "price";
      this.isAsc = this.isAsc == "desc" ? "asc" : "desc";
      this.noMore = false
      this.reqPageNum = 0;
      this.resDayRecInfo = [];
      this.getPlatformGoodsList();
    },
    //搜索动作：
    onSearch(val) {
      if (!this.value) {
        this.$toast.fail("请输入内容");
        return;
      }
      this.reqPageNum = 0;
      this.resDayRecInfo = [];
      this.getPlatformGoodsList();
    },
    onCancel() {
      this.value = "";
      this.reqPageNum = 0;
      this.resDayRecInfo = [];
      this.platformTypeList();
    },
    jumpGoodsInfo(i) {
      this.$router.push({
        path: "/pages/bGoodsInfo",
        query: {
          //传递参数
          GoodsId: i,
        },
      });
    },
  },
  components: {
    tabbar,
    [Search.name]: Search,
  },
};
</script>

<style scoped>
.wrap {
  background-color: #f2f3f9;
  padding: 0px 15px;
  padding-top: 20px;
}
.titleWarp {
  width: calc(100% - 30px);
  margin: 20px auto;
  height: 35px;
  line-height: 30px;
  overflow-y: hidden;
  overflow-x: scroll;
  display: -webkit-box;
}
.titleItem {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
  margin-right: 30px;
  /* overflow: hidden; */
  /* float: left; */
}
.titleItemActiv {
  font-size: 21px;
  font-weight: 500;
  color: #181818;
  border-bottom: 4px solid #000;
}
.filterWrap {
  width: calc(100% - 26px);
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  padding-left: 26px;
  margin-top: 10px;
}
.filterItem {
  float: left;
  margin-right: 15px;
}
.filterItem > img {
  width: 5px;
  height: 5px;
  margin-bottom: 2px;
}
.filterItemLine {
  height: 15px;
  width: 1px;
  background-color: #666666;
  margin-top: 10px;
}
.van-search {
  background-color: #f2f3f9;
}
.van-cell {
  padding: 7px 8px 7px 0;
  font-size: 12px;
}
.van-search__content {
  background-color: #fff;
}
.goodsList {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 7px;
}
.goodsItem {
  width: calc(49% - 20px);
  padding: 10px;
  background: #ffffff;
  border-radius: 20px;
  margin-top: 10px;
}
.goodsBanner {
  width: 100%;
  height: 140px;
}
.proTitle {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  line-height: 15px;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.priceWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.priceNum {
  font-size: 12px;
  font-weight: 500;
  color: #ff4646;
}
.saleNum {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
}
</style>
